<template>
  <div class="cell_box v-picker">
    <div class="cell_ft">
      <div @touchstart="showPicker">
        <input :id="'name-box-' + uuid" class="cell_primary" placeholder="请选择" @input="getVal" readonly="readonly">
      </div>
    </div>
    <div class="gearArea" v-show="show"></div>
  </div>
</template>
<script>
import Picker from 'src/service/pickr'
import dat from 'src/service/pickr.json'
export default {
  name: 'c-picker',
  props: {
    datas: {
      type: Array,
      default () {
        return dat
      }
    },
    dType: {
      type: Number,
      default: 1
    },
    location: {
      type: Object
    },
    column: {
      type: Number,
      default: 3
    }
  },
  data () {
    return {
      uuid: Math.random().toString(36).substring(3, 8),
      show: false
    }
  },
  watch: {
    location () {
      this.setLocation()
    }
  },
  mounted () {
    this.render()
    this.setLocation()
  },
  methods: {
    setLocation () {
      // if (this.location && this.location.id) {
      this.picker.setLocation(this.location)
      // }
    },
    showPicker () {
      this.show = true
    },
    getVal (e) {
      this.show = false
      this.$emit('get-val', e.target.value, e.target.getAttribute('codeStr'))
    },
    render () {
      const _this = this
      this.picker = new Picker()
      this.picker.init({
        'trigger': `#name-box-${this.uuid}`,
        'keys': {
          id: 'id',
          name: 'name'
        },
        'type': _this.dType,
        'data': _this.datas,
        'column': _this.column
      })
    }
  }
}
</script>
<style>
.gearArea{font-size:10px;background-color:rgba(0,0,0,.4);display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9900;overflow:hidden;animation-fill-mode:both}
.areaCtrl{background-color: #fff; color: #333; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 9901; overflow: hidden; transform: translate3d(0,0,0);}
.slideInUp{animation:slideInUp .3s}
@keyframes slideInUp{from{transform:translate3d(0,100%,0)}
to{transform:translate3d(0,0,0)}
}
.areaRoll{display:flex;width:100%;height:auto;background-color:transparent;-webkit-mask:-webkit-gradient(linear,0 50%,0 100%,from(#debb47),to(rgba(36,142,36,0)));-webkit-mask:-webkit-linear-gradient(top,#debb47 50%,rgba(36,142,36,0))}
.areaRoll>div{font-size:1.6em;height:10em;float:left;background-color:transparent;position:relative;flex:1}
.areaRoll>div .gear{width:100%;float:left;position:absolute;z-index:9902;margin-top:4em}
.lareaRollMask{-webkit-mask:-webkit-gradient(linear,0 40%,0 0,from(#debb47),to(rgba(36,142,36,0)));-webkit-mask:-webkit-linear-gradient(bottom,#debb47 50%,rgba(36,142,36,0));padding:0}
.areaGrid{position:relative;top:4em;width:100%;height:2em;margin:0;box-sizing:border-box;z-index:0;border-top:1px solid #ffab00;border-bottom:1px solid #ffab00}
.areaRoll>div:nth-child(3) .areaGrid>div{left:42%}
.areaBtn{color:#fff;font-size:1.6em;line-height:1em;text-align:center;padding:.8em 1em}
.areaBtnBox{display:flex;justify-content:space-between;align-items:stretch;background-color:#ffa200;position:relative;z-index:9903}
.tooth{height:2em;line-height:2em;text-align:center;display:flex;line-clamp:1;flex-direction:column;overflow:hidden}
.flex{display:flex}
.v-picker input{width: 100%;border:0;outline:0;-webkit-appearance:none;background-color:transparent;font-size:inherit;color:inherit;height:1.41176471em;line-height:1.41176471}
</style>
